<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-08-10 14:58:56
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-08-15 10:52:12
 * @FilePath: \出口卖家端\src\views\LoanBill\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="header">
    <div class="title">合同</div>
    <div>
      <el-tabs v-model="modulekey">
        <el-tab-pane label="销售申请合同" :name="0"></el-tab-pane>
        <el-tab-pane label="交易订单合同" :name="1"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <div class="bill-body">
    <component :is="moduleKeys[modulekey]" />
  </div>
</template>
<script setup>
import { ref, onMounted, markRaw } from "vue";
import { useRoute } from "vue-router";
import cSalesApplication from './components/c-sales-application.vue'
import cTradingOrder from './components/c-trading-order.vue'
const route = useRoute();
onMounted(() => {
  const item = route.query;
  if (item && item.key) {
    modulekey.value = item.key * 1;
  }
});
const modulekey = ref(0);
const moduleKeys = ref({
  0: markRaw(cSalesApplication),
  1: markRaw(cTradingOrder)
});
</script>
<style lang="less" scoped>
:deep(.el-tabs__header) {
  margin: 0 !important;
  box-shadow: 0px 6px 8px 0px rgba(0, 79, 115, 0.05);
  .el-tabs__nav-wrap::after {
    position: static !important;
  }
  .el-tabs__item {
    color: #5e6163;
  }
  .el-tabs__item.is-active {
    color: var(--el-color-primary);
  }
}
.bill-body {
  margin: 16px 24px;
}
.header {
  width: calc(100% - 24px);
  background: #ffffff;
  padding-top: 24px;
  padding-left: 24px;
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #26282a;
    margin-bottom: 16px;
  }
}
</style>